<template>
    <view :class="['j-panel',classname]">
        <view v-if="title" :class="['j-panel-title', { 'j-panel-title-hide-top': hideTop }]">{{ title }}</view>
        <view :class="['j-panel-content', { 'j-panel-without-border': hideBorder }]">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Panel',
        props: {
            title: {
                type: String,
                default: ''
            },
            // 标题顶部距离
            hideTop: {
                type: Boolean,
                default: false
            },
            hideBorder: {
                type: Boolean,
                default: false
            },
            classname: {
                type: String,
                default: ''
            },
        },
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss">
    .j-panel {
        position: relative;
        overflow: hidden;
        &-title {
            font-size: 14px;
            line-height: 1;
            color: #1c2438;
            padding: 20px 16px 10px;
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 200%;
                transform: scale(.5);
                transform-origin: 0 0;
                pointer-events: none;
                box-sizing: border-box;
                border: 0 solid #e9eaec;
                border-top-width: 1px;
                border-bottom-width: 1px;
            }
        }
        &-content {
            position: relative;
            background: #fff;
            overflow: hidden;
        }
        &-title-hide-top {
            padding-top: 0;
        }
        .j-panel-without-border::after {
            border: 0 none;
        }
    }
</style>
